<template>
	<div>
		<div class="head">
			<router-link tag="div" class="return" to="/Setting"></router-link>
			个人信息
			<div class="operating" @click="submit">保存</div>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<group label-width="9.5em" label-margin-right="2em" @click.native="file()" style="margin-top:10px;">
					<cell title="头像" class="l-orange" is-link>
						<img class="ico" src="../assets/logo.png" alt="" id="img" v-if="!myInfo.imgUrl">
						<img class="ico" :src="myInfo.imgUrl" alt="" id="img" v-if="myInfo.imgUrl">
					</cell>
				</group>
				<input type="file" id="file" accept="image/png,image/jpg,image/jpeg" @change="change($event)" style="display:none;">
				<group class="register" label-width="100px" style="margin-top:10px;">
					<x-input placeholder="未设置" title="昵称" v-model.trim="myInfo.userName" text-align="right"></x-input>
					<x-input placeholder="未设置" title="个性签名" v-model.trim="myInfo.nickName" text-align="right"></x-input>
					<popup-picker title="性别" :data="list2" v-model="value2" @on-change="onChange2" placeholder="请选择"></popup-picker>
					<x-input placeholder="未设置" title="年龄" v-model.trim="myInfo.age" text-align="right"></x-input>
					<datetime title="生日" v-model="date" :start-date="startDate" @on-change="onChange3"></datetime>
					<popup-picker title="星座" :data="list1" v-model="value1" @on-change="onChange" placeholder="请选择"></popup-picker>
					<x-input placeholder="未设置" title="职业" v-model.trim="myInfo.profession" text-align="right"></x-input>
				</group>
				<div class="prompt" v-if="material">
					<span>*&nbsp;完善性别、年龄、职业即可得到</span>
					<span v-text="material"></span>
					<span>魔分奖励哦</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { modifyPersonal } from './../utils/api';
	import { Datetime, PopupPicker, Group, Cell, Picker, XButton, Divider, XSwitch } from 'vux';
	import { Toast } from 'vant';
	export default {
		data() {
			return {
				myInfo: [],
				list1: [
					['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
				],
				value1: ['请选择'],
				list2: [
					['男', '女']
				],
				value2: [],
				date: '',
				startDate: '1900-01-01',
				material: '',
				img: ''
			}
		},
		components: {
			PopupPicker,
			Group,
			Picker,
			XButton,
			Divider,
			Cell,
			XSwitch,
			Datetime
		},
		beforeCreate() {
			_this = this;
		},
		mounted() {
			this.axios.all([modifyPersonal.getModifyPersonal(), modifyPersonal.getMaterial()])
				.then(this.axios.spread(function(res, res2) {
					_this.myInfo = res.data;
					_this.value1 = [res.data.constellation != null ? res.data.constellation : '白羊座'];
					_this.value2 = [res.data.gender != null ? res.data.gender : '男'];
					_this.date = res.data.birthday;
					_this.material = res2.data.value;
				}));
		},
		methods: {
			file() {
				document.getElementById('file').click()
			},
			dataURItoBlob(dataURI) { // 将 base64 转换为 Blob 对象
				var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]; // mime类型
				var byteString = atob(dataURI.split(',')[1]); // base64 解码
				var arrayBuffer = new ArrayBuffer(byteString.length); // 创建缓冲数组
				var intArray = new Uint8Array(arrayBuffer); // 创建视图
				for(var i = 0; i < byteString.length; i++) {
					intArray[i] = byteString.charCodeAt(i);
				}
				return new Blob([intArray], {
					type: mimeString
				});
			},
			dataURLtoFile(dataurl, filename) { // 将 base64 转换为 File 对象
				var arr = dataurl.split(','),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while(n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new File([u8arr], filename, {
					type: mime
				});
			},
			postImg(imageData) {
				this.img = this.dataURLtoFile(imageData, Math.random() + '.png');
				this.uploadpicture();
				this.destoried();
			},
			change(event) {
				let image = document.getElementById('img'); //预览对象
				this.clip(event, {
					resultObj: image,
					aspectRatio: 1,
				})
			},
			uploadpicture() {
				let formData = new FormData();
				formData.append("imgUrl", this.img);
				let config = {
					headers: {
						"Content-Type": "multipart/form-data"
					}
				};
				this.axios.post(process.env.API_HOST + 'admin/operating/uploadpicture', formData, config).then(res => {
					if(res.data.code == 200) {
						Toast('修改头像成功！');
					}
				})
			},
			submit() {
				modifyPersonal.getUpdate({
					'userName': this.myInfo.userName, // 昵称
					'nickName': this.myInfo.nickName, // 个性签名
					'gender': this.value2, // 性别
					'age': this.myInfo.age, // 年龄
					'birthday': this.date, // 生日
					'constellation': this.value1, // 星座
					'profession': this.myInfo.profession //职业
				}).then(res => {
					if(res.code == 200) {
						Toast(res.msg);
					}
				})
			},
			onChange(val) {
				this.value1 = val;
			},
			onChange2(val) {
				this.value2 = val;
			},
			onChange3(val) {
				this.date = val;
			}
		}
	}
</script>

<style lang="less" scoped>
	.loginOut {
		background: #ffffff;
		text-align: center;
		color: #ff5555;
		padding: 10px 0;
		margin-top: 15px;
	}
	
	.ico {
		width: 60px;
		height: 60px;
		border-radius: 50%;
	}
	
	.prompt {
		color: #ff5555;
		padding: 10px;
		font-size: 13px;
	}
</style>